import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
// import { useSelector, useDispatch } from 'react-redux'
import { Table, Space, Button, Popconfirm, message, Modal, Input, Select } from 'antd'
import './css/list.css'
// 导入测试数据
import res from './../mock/stuList'
localStorage.setItem('stuList', JSON.stringify(res))
function List() {
  const columns = [
    {
      title: '学生姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <span style={{ color: '#1890ff' }}>{text}</span>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '性别',
      key: 'sex',
      dataIndex: 'sex',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size='middle' style={{ color: '#1890ff' }}>
          <span
            style={{ cursor: 'pointer' }}
            onClick={() => {
              showDetail(record)
            }}>
            查看
          </span>
          <span
            style={{ cursor: 'pointer' }}
            onClick={() => {
              editDetil(record)
            }}>
            编辑
          </span>
          <Popconfirm
            title='确认删除吗?'
            onConfirm={() => {
              del(record)
            }}
            okText='删除'
            cancelText='取消'>
            <span style={{ cursor: 'pointer' }}>删除</span>
          </Popconfirm>
        </Space>
      ),
    },
  ]
  const newArr = JSON.parse(localStorage.getItem('stuList'))
  const [data, setData] = useState(newArr)
  // 查看学生详情
  const [stuDetail, setStuDetail] = useState([])
  useEffect(() => {
    console.log(stuDetail)
  }, [stuDetail])
  const showDetail = (record) => {
    setStuDetail(record)
    setIsShowDetail(true)
  }

  // 纪录姓名
  const [name, setName] = useState('')
  // 纪录性别
  const [sex, setSex] = useState('男')
  // 纪录年龄
  const [age, setAge] = useState()
  // 纪录地址
  const [address, setAddress] = useState('')
  // 纪录index值
  const [index, setIndex] = useState()
  // 纪录key值
  const [key, setKey] = useState('')
  // 编辑学生信息.1 数据回显
  const editDetil = (record) => {
    setIndex(record.index)
    setKey(record.key)
    setName(record.name)
    setAge(record.age)
    setSex(record.sex)
    setAddress(record.address)
    console.log(record)
    setStuDetail(record)
    setIsShowEdit(true)
  }
  // 删除
  const del = (record) => {
    const { index } = record
    let newStuList = newArr.filter((item) => item.index !== index)
    console.log(newStuList)
    localStorage.setItem('stuList', JSON.stringify(newStuList))
    setData(newStuList)
    message.success('删除成功', 1)
  }

  const history = useHistory()
  // 模态框相关属性 详情

  const [isShowDetail, setIsShowDetail] = useState(false)

  const handleOk = () => {
    setIsShowDetail(false)
  }

  const handleCancel = () => {
    setIsShowDetail(false)
  }
  // 模态框相关属性 修改
  // 编辑学生信息.2 确认后修改
  const [isShowEdit, setIsShowEdit] = useState(false)
  const handlesOk = () => {
    setIsShowEdit(false)
    setSex('男')
    setAddress('')
    setAge()
    const editItem = []
    editItem.push({
      index,
      key,
      name,
      age,
      sex,
      address,
    })
    newArr.splice(index, 1)
    const newArrs = [...newArr, ...editItem]
    newArrs.sort((a, b) => a.index - b.index)
    localStorage.setItem('stuList', JSON.stringify(newArrs))
    const newDatas = JSON.parse(localStorage.getItem('stuList'))
    setData(newDatas)
    console.log(newArrs)
  }

  const handlesCancel = () => {
    setIsShowEdit(false)
  }
  // 前往添加页面
  const toAdd = () => {
    history.push('/add')
  }

  return (
    <>
      {/*详情展示 */}
      <Modal
        title={stuDetail.name + '  详情'}
        visible={isShowDetail}
        onOk={handleOk}
        onCancel={handleCancel}>
        <div>
          <Space direction='vertical'>
            <Space>
              <span>年龄:</span>
              <span>{stuDetail.age}</span>
            </Space>
            <Space>
              <span>性别:</span>
              <span>{stuDetail.sex}</span>
            </Space>
            <Space>
              <span>地址:</span>
              <span>{stuDetail.address}</span>
            </Space>
          </Space>
        </div>
      </Modal>
      {/* 修改 */}
      <Modal
        title={stuDetail.name + '  信息修改'}
        visible={isShowEdit}
        onOk={handlesOk}
        onCancel={handlesCancel}>
        <div>
          <Space direction='vertical'>
            <Space>
              <span>姓名:</span>
              <Input
                value={name}
                onChange={(e) => {
                  setName(e.target.value)
                }}
                disabled></Input>
            </Space>
            <Space>
              <span>年龄:</span>
              <Input
                value={age}
                onChange={(e) => {
                  setAge(e.target.value)
                }}></Input>
            </Space>
            <Space>
              <span>性别:</span>
              <Select
                style={{ width: 120 }}
                value={sex}
                onChange={(e) => {
                  setSex(e)
                }}>
                <Select.Option value='男'>男</Select.Option>
                <Select.Option value='女'>女</Select.Option>
              </Select>
            </Space>
            <Space>
              <span>地址:</span>
              <Input
                value={address}
                onChange={(e) => {
                  setAddress(e.target.value)
                }}></Input>
            </Space>
          </Space>
        </div>
      </Modal>
      <div className='header'>
        <span className='title'>学生列表</span>
        <Button type='primary' onClick={toAdd}>
          批量添加学生
        </Button>
      </div>
      <Table columns={columns} dataSource={data} bordered />
    </>
  )
}

export default List
